<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>羊了个羊</title>
    <style>
        .scene {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .item {
            width: 25px;
            height: 25px;
            float: left;
            background-color: bisque;
            position: relative;
        }

        .card {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: aquamarine;
            z-index: 1;
            background-size: cover;
            box-shadow: 0 0 1px #ccc;
        }

        .mask {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #00000072;
        }

        .checkedbox {
            width: 350px;
            height: 50px;
            border: 1px solid black;
            margin: 50px auto;
        }

        .end {
            display: none;
            margin: 0 auto;
            width: 500px;
            height: 45px;
            line-height: 45px;
            font-size: 35px;
        }
        .title{
            width: 200px;
            height: 50px;
            border: 1px solid black;
            margin: 0 auto 10px;
            line-height: 50px;
            font-size: 35px;
            text-align: center;
            color: lightcoral;
        }
    </style>
</head>

<body>
    <div class="title"></div>
    <div class="scene"></div>
    <div class="checkedbox"></div>
    <form action="">
        <button class="end"></button>
    </form>
    <script>
        //创建坐标系
        let level =8;
        let scene = document.querySelector('.scene');
        let fg = document.createDocumentFragment();
        let itemObj = {};
        for (let i = 0; i < 20; i++) {
            for (let j = 0; j < 20; j++) {
                let item = document.createElement("div");
                item.classList.add("item");
                fg.appendChild(item);
                itemObj[j + "-" + i] = item;
            }
        }
        scene.appendChild(fg);
        //创建卡片
        let cardArr = [];
        function createCard(index) {
            //1.创建表示卡片的坐标系统
            let posArr = [];
            for (let i = 0; i < 20; i++) {
                posArr.push([]);
                for (let j = 0; j < 20; j++) {
                    posArr[i].push(0);
                }
            }
            //2.随机将卡片坐标中的值设置为1
            for (let i = index; i < 19 - index; i++) {
                for (let j = index; j < 9; j++) {
                    if (Math.random() < 0.2 && posArr[i][j - 1] === 0 && posArr[i - 1][j - 1] === 0 && posArr[i - 1][j] === 0 && posArr[i - 1][j + 1] === 0) {
                        posArr[i][j] = 1;
                        posArr[i][18 - j] = 1;
                    }
                }
            }
            //3.根据设置的值创建卡片
            for (let i = 0; i < 20; i++) {
                for (let j = 0; j < 20; j++) {
                    if (posArr[i][j] === 1) {
                        let card = document.createElement("div");
                        card.classList.add('card');
                        card.style.zIndex = 10 - index;
                        itemObj[j + "-" + i].appendChild(card);
                        cardArr.push(card);
                    }
                }
            }

        }
        for (let i = 1; i < level; i++) {
            createCard(i);
        }
        //4.删除多余卡片
        for (let i = 0; i < cardArr.length % 3; i++) {
            let r = cardArr.pop();
            r.parentNode.removeChild(r);
        }
        //5.创建图片数组
        let imgArr = [];
        imgLength = cardArr.length / 3;
        for (let i = 0; i < imgLength; i++) {
            imgArr.push(Math.floor(Math.random() * 10));
        }
        imgArr = [...imgArr, ...imgArr, ...imgArr];
        imgArr.sort(() => Math.random() - 0.5);
        for (let i = 0; i < cardArr.length; i++) {
            cardArr[i].style.backgroundImage = `url(./imgs/${imgArr[i]}.png)`;
            cardArr[i].img = imgArr[i];
        }
        //6.绘制遮罩
        function drawMask() {
            let masks = document.querySelectorAll(".mask");
            masks.forEach((m) => { m.parentNode.removeChild(m) });
            for (let i = 0; i < cardArr.length; i++) {
                cardArr[i].index = i;
                let pos = cardArr[i].getBoundingClientRect();
                let point1 = { x: pos.x, y: pos.y };
                let point2 = { x: pos.x + 45, y: pos.y };
                let point3 = { x: pos.x, y: pos.y + 45 };
                let point4 = { x: pos.x + 45, y: pos.y + 45 };
                if (cardArr[i] === document.elementFromPoint(point1.x, point1.y) && cardArr[i] === document.elementFromPoint(point2.x, point2.y) && cardArr[i] === document.elementFromPoint(point3.x, point3.y) && cardArr[i] === document.elementFromPoint(point4.x, point4.y)) {
                    continue;
                }
                let mask = document.createElement("div");
                mask.classList.add('mask');
                mask.style.zIndex = cardArr[i].style.zIndex;
                cardArr[i].parentNode.appendChild(mask);
            }
        }
        drawMask();
        //7.点击事件
        let checkedList = [];
        let checkedbox = document.querySelector(".checkedbox");
        scene.onclick = (e) => {
            let { target } = e;
            if (target.className === "card") {
                target.parentNode.removeChild(target);
                target.style.position = "static";
                target.style.float = "left";
                checkedList.push(target);
                cardArr.splice(target.index, 1);
            }
            checkedList.sort((a, b) => {
                if (a.img > b.img) {
                    return 1;
                } else {
                    return -1;
                }
            })
            for (let i = 1; i < checkedList.length - 1; i++) {
                if (checkedList[i].img === checkedList[i - 1].img && checkedList[i].img === checkedList[i + 1].img) {
                    checkedList.splice(i - 1, 3);
                    break;
                }
            }
            checkedbox.innerHTML = "";
            for (let i = 0; i < checkedList.length; i++) {
                checkedbox.appendChild(checkedList[i])
            }
            drawMask();
           
            if (checkedList.length > 7) {
                scene.onclick=null;
                let fail = document.querySelector('.end');
                fail.innerHTML = "游戏失败,点击重新开始";
                fail.style.display = "block";
            }
            let cards = document.querySelectorAll(".card")
            if (cards.length === 0) {
                level++;
                let success = document.querySelector('.end');
                success.innerHTML = "游戏成功，点击进入下一关";
                success.style.display = "block";
            }
        }
    </script>
</body>
</html>